<template>
  <div class="banner" v-if="isShow" @mouseenter="showTooltip" @mouseleave="tooltipVisible = !tooltipVisible">
    <div class="banner-head">
      <div class="banner-title">{{ $t('promote.banner_title') }}</div>
      <Tooltip placement="top" v-if="tooltipVisible" transfer>
        <Icon type="md-close" class="close" color="#242424" @click="closeMet" />
        <div slot="content">{{ $t('promote.banner_close_text') }}</div>
      </Tooltip>
    </div>
    <div class="banner-content">
      <Row :gutter="60">
        <Col span="18">
        <Carousel v-model="defaultVal" loop autoplay :autoplay-speed="7000" arrow="never">
          <CarouselItem v-for="item in bannerList" :key="item.id">
            <div class="carousel-content">
              <div class="title">{{ item.title }}</div>
              <div class="text">{{ item.text }}</div>
            </div>
          </CarouselItem>
        </Carousel>
        </Col>
        <Col span="6">
        <img :src="bannerImg" class="img" alt="">
        </Col>
      </Row>
    </div>
  </div>
</template>
<script>

export default {
  props: {
    bannerList: Array,
    bannerImg: String
  },
  data() {
    return {
      defaultVal: 0,
      tooltipVisible: false,
      isShow: true
    }
  },
  methods: {
    showTooltip() {
      this.tooltipVisible = true;
    },
    closeMet() {
      this.isShow = false;
    }
  }
}
</script>
<style lang="less" scoped>
.banner {
  font-family: Open Sans, Open Sans;
  max-height: 336px;
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid #E8E8E8;
  padding: 40px;

  &-head {
    margin-bottom: 9px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .banner-title {
      font-weight: 600;
      font-size: 22px;
      color: #1E1714;
      line-height: 36px;
    }

    .close {
      font-size: 34px;
      cursor: pointer;
    }
  }

  &-content {

    .carousel-content {
      height: 180px;
      margin-top: 31px;

      .title {
        font-weight: 600;
        font-size: 22px;
        color: #1E1714;
        line-height: 26px;
        margin-bottom: 4px;
      }

      .text {
        font-weight: 500;
        font-size: 20px;
        color: #767B93;
        line-height: 26px;
      }
    }

    .img {
      width: 179px;
      height: 179px;
      display: block;
      margin: 0 auto;
    }
  }
}
</style>
